<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {cityJson} from '@/enum/china'
import {getProjectListApi} from "@/service/api/businessApi";
import {useProjectStore} from "@/store/modules/project";
import {useAuthStore} from "@/store/modules/auth";

const authStore = useAuthStore();
const projectStore = useProjectStore();
const projectId = projectStore.currentProject?.id;
const projectList: any = ref([]);
const getProjectList = () => {
    getProjectListApi({
        pageNo: 1,
        pageSize: 1000,
        orgId: authStore.userInfo?.orgId
    }).then(res => {
        projectList.value = res.data?.data;
        let cityCode = ''
        if (projectList.value.length > 0 && projectId) {
            projectList.value.forEach(item => {
                if (item.id == projectId) {
                    cityCode = item.cityCode;
                }
            })
        }
        let cityName = ''
        cityJson.forEach(item => {
            if (item.code == cityCode) {
                cityName = item.name.replace('市', '')
            }
        })
        getWeatherInfo(cityName);
    });
};

onMounted(() => {
    getProjectList()
})
let weatherData = ref({})
const getWeatherInfo = async (city) => {
    try {
        const response = await fetch(`http://v1.yiketianqi.com/api?unescape=1&version=v9&appid=17567951&appsecret=NLst9rwM&city=${city}`);
        const data = await response.json();
        weatherData.value = data.data[0];
    } catch (error) {
        console.error('Error fetching weather data:', error);
    }
}
</script>


<template>
    <div class="Card">
        <div class="card-header">
            <img src="../../../assets/imgs/breedAquatics/title_ssqx@2x.png" alt="">
        </div>
        <div class="card-warp">
            <div class="warp">
                <div class="warp-item">
                    <span>{{ weatherData.tem }}°C</span>
                    <span>空气温度</span>
                </div>
                <div class="warp-item">
                    <span>{{ weatherData.win_speed }}</span>
                    <span>风力等级</span>
                </div>
                <div class="warp-item">
                    <span>{{ weatherData.humidity }}</span>
                    <span>空气湿度</span>
                </div>
                <div class="warp-item">
                    <span>{{ weatherData.rain_pcpn || 0 }} mm</span>
                    <span>雨量</span>
                </div>
                <div class="warp-item">
                    <span>{{ weatherData.win_meter }}</span>
                    <span>风速</span>
                </div>
                <div class="warp-item">
                    <span>{{ weatherData.visibility }}</span>
                    <span>能见度</span>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.Card {
    width: 450px;
    height: 390px;
    background-image: url("@/assets/imgs/breedAquatics/img_left.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;

    .card-header {
        width: 100px;
        height: 50px;
        padding-top: 20px;
        margin-left: 20px;
    }

    .card-warp {
        flex: 1;
        padding: 10px 20px 0 20px;

        .warp {
            padding-top: 30px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 30px 0;

            &-item {
                width: 140px;
                height: 96px;
                background-image: url("../../../assets/imgs/breedAquatics/bg_ssqx_ic@2x.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                span {
                    &:nth-child(1) {
                        margin-top: 10px;
                        font-weight: bold;
                        font-size: 20px;
                        color: #FFFFFF;
                        line-height: 30px;
                        letter-spacing: 1px;
                    }

                    &:nth-child(2) {
                        font-weight: 400;
                        font-size: 14px;
                        color: #A2DEFF;
                    }
                }
            }
        }
    }
}
</style>
